<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式节庆活动砸金蛋效果js特效代码</title>
<meta name="description" content="" />
<script src='http://libs.baidu.com/jquery/1.8.3/jquery.min.js'></script>
<style>
div.egg{width: 600px; height: 250px; margin:0px auto;}
div.eggBox{overflow: hidden;}
div.eggShadow{position:absolute; top:0px; right:0px; bottom:0px; left:0px; background:rgba(0,0,0,0.6); display: none;}
div.eggShadowBox{width:417px; height:350px;  margin:80px auto 0px; position: relative;}
div.eggShadowBoxOne{width:320px; height:240px; margin:70px auto 0px; text-align: center; position: absolute; top:0px; left:30px; display: none;}
div.eggShadowBoxOne img.caidai{position: absolute; top:-42px; left:-40px;}
div.eggShadowBoxOne img.chuizi{position: absolute; top:-60px; right:0px;}
div.eggShadowBoxOne img.chuiziActive{
-moz-transform-origin: bottom right;
-webkit-transform-origin: bottom right;
transform-origin: bottom 100%;
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
-moz-animation: chuizi 1.5s ease 9999;
-webkit-animation: chuizi 1.5s ease 9999;
animation: chuizi 1.5s ease 9999;
}
@keyframes chuizi{
    0%{
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
        }
    30%{
        -moz-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }
    100%{
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }
}
@-webkit-keyframes chuizi{
    0%{
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
        }
    30%{
        -moz-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }
    100%{
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }
}
div.eggShadowBoxTwo{width: 350px; height: 300px; background:rgba(0,0,0,0.3); margin:0px auto 0px; text-align: center; border-radius:5px; position: absolute; top:0px; left:32px; display: none;}
div.eggShadowBoxTwo img.gx{width: 60%; position: absolute; left:50%; margin-left:-30%; top:-102px;}
div.eggShadowBoxTwo div.text{width: 100%; text-align: center; font-size:16px; color: #fff; padding-top: 50px; font-family: '微软雅黑'; position: relative; z-index: 10;}
div.eggShadowBoxTwo div.jiangpin{width: 100%; position: absolute; top:50px; left:0px; }
div.eggShadowBoxTwo img.jiangpin{width: 70%;}
div.jiangpinBtn{width: 100%; position: absolute; bottom:20px;}
div.jiangpinBtnBox{width: 80%; height:35px; text-align: center; line-height: 35px; margin:0px auto; background:#33D92A; font-family: '微软雅黑'; font-size:16px; color: #fff; cursor:pointer; border-radius: 6px;}
</style>
</head>
<body>
    <div class="egg">
        <div class="eggBox">
            <img src="images/egg.png" alt="">
            <img src="images/egg.png" alt="">
            <img src="images/egg.png" alt="">
        </div>
    </div>
    <div class="eggShadow">
        <div class="eggShadowBox">
            <div class="eggShadowBoxOne">
                <img src="images/caidai.png" width="90" class="caidai" alt="">
                <img src="images/chuizi.png" class="chuizi chuiziActive" alt="">
                <img src="images/egg.png" alt="">
            </div>
            <div class="eggShadowBoxTwo">
                <img src="images/gx.png" class="gx" alt="">
                <div class="text">获得奖金100元</div>
                <div class="jiangpin"><img src="images/jiangpin.png" class="jiangpin" alt=""></div>
                <div class="jiangpinBtn">
                    <div class="jiangpinBtnBox">领取奖励</div>
                </div>
            </div>
        </div>
    </div>
    <script>
    (function(){
        $("div.eggBox img").click(function(){
            // 生成1-8的随机数
            var randomSum = (Math.floor(Math.random() * 8) + 1 );
            var jiangPinArr = ['一等奖','二等奖','三等奖','四等奖','五等奖','六等奖','7等奖','8等奖','9等奖','10等奖'];
            $("div.eggShadowBoxTwo div.text").html(jiangPinArr[randomSum-1]);
            // 效果
            $("div.eggShadow").stop(true,true).fadeIn();
            $("div.eggShadowBoxOne").stop(true,true).fadeIn();
            setTimeout(function(){
                $("div.eggShadowBoxOne").stop(true,true).fadeOut();
                $("div.eggShadowBoxTwo").stop(true,true).fadeIn();
            },2000);
        });
        $("div.eggShadow").click(function(){
            $(this).stop(true,true).fadeOut();
            $("div.eggShadowBoxOne").stop(true,true).fadeOut();
            $("div.eggShadowBoxTwo").stop(true,true).fadeOut();
        });
        $("div.eggShadowBoxOne").click(function(event){
            event.stopPropagation();
        });
        $("div.eggShadowBoxTwo").click(function(event){
            event.stopPropagation();
        });
    })();
    </script>
</body>
</html>